<template>
  <el-button
    type="warning"
    @click="checkEmail"
    :disabled="!isEdit || isAllowSendCode"
    style="margin-left:20px;"
    round
  >
    <i v-if="!isAllowSendCode">发送验证码</i>
    <i v-else>{{ SendEmailCodeTime }}</i>
  </el-button>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      required: false,
      default: true
    },
    userInfo: {
      type: Object,
      required: true
    }
  },
  components: {},
  data() {
    return {
      // 是否允许发送邮箱标志位
      isAllowSendCode: false,
      SendEmailCodeTime: 60
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 发送邮箱
    async checkEmail() {
      let datas = {
        email: this.userInfo.email
      }
      const res = await this.$API.user.SendVerificationCode(
        this.$qs.stringify(datas)
      )
      console.log(res)
      if (res.status == 200) {
        this.$message.success('发送成功')
        this.isAllowSendCode = true
        this.startCountDown()
      }
    },
    startCountDown() {
      this.SendEmailCodeTime = 60 // 重置时间
      const timer = setInterval(() => {
        if (this.SendEmailCodeTime > 0) {
          this.SendEmailCodeTime--
        } else {
          this.isAllowSendCode = false
          clearInterval(timer) // 倒计时结束，清除定时器
        }
      }, 1000) // 每秒更新倒计时秒数
    }
  }
}
</script>

<style scoped lang="less">
</style>
